<template>
  <div class="as-table">
    <div class="as-table-title">
      <slot name="title"></slot>
    </div>
    <div class="as-table-head">
      <table>
        <slot name="head"></slot>
      </table>
    </div>
    <div class="as-table-body">
      <table>
        <slot name="body"></slot>
      </table>
    </div>
    <div class="as-table-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>

  export default {
    name: "AsTable",
    props: {
      data: {type: Array, default: () => []}
    },
    data() {
      return {
        tableId: '',
        columns: []
      }
    },
    created() {
      this.tableId = this.guid();
    },
    computed: {
    },
    methods: {
    },
    destroyed() {
      this.tableId = '';
    }
  }
</script>

<style lang="less">
  .as-table {
    width: 100%;
    height: auto;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;

    .as-table-title {
    }
  }
</style>
